<template>
	<div>
		<div class="in-img">
			<div class="top">
				<div class="c1"></div>
				<div class="login">
					<!-- 登录 -->
					<a href="#" @click.prevent="login" v-if="loginOne">登录</a>
					<a href="#" v-if="welcome" @click.prevent="personalCenter"
						style="position: relative;left: 40px;">{{manager==null?"":manager.userNickname}}</a>
					<a href="#" v-if="welcome" @click.prevent="personalCenter"
						style="position: relative;left: 20px;">{{manager.userNickname==null?"完善信息":""}}</a>
					<!-- 注册 -->
					<a href="#" @click.prevent="loginout" v-if="loginOutOne">注销</a>
				</div>
			</div>
			<div class="toptwo">
				<a href="#">
					<div class="l0" style="height: 90px;">
						<div class="aa" style="background-color: rgba(60, 146, 220, 1);">
							<div class="home"> </div>
							<div>主页home</div>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="l0" style="height: 90px;">
						<div class="aa" style="background-color: rgba(55, 180, 230, 1);">
							<div class="notice"> </div>
							<div>通知公告</div>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="l0" style="height: 90px;">
						<div class="aa" style="background-color: rgba(95, 190, 130, 1);">
							<div class="guide"> </div>
							<div>服务指南</div>
						</div>
					</div>
				</a>
				<a href="#" @click.prevent="personalCenter">
					<div class="l0" style="height: 90px;">
						<div class="aa" style="background-color: rgba(240, 160, 50, 1);">
							<div class="user"> </div>
							<div>用户中心</div>
						</div>
					</div>
				</a>
			</div>
			<div>
				<a href="#" @click.prevent="myrepairOne">
					<div class="myrepair">
					</div>
				</a>
			</div>
			<div class="in-sidenav">
				<!--已有报修内容-->
				<div class="menu-box">
					<div class="txt-box bg-blue">
						<p><img src="../img/icon01.png" width="34" height="34"></p>已有报修
					</div>
					<div class="line bg-blue"></div>
				</div>

				<!--报修统计-->
				<div class="menu-box">
					<div class="txt-box bg-orange">
						<p><img src="../img/icon01.png" width="34" height="34"></p>报修统计
					</div>
					<div class="line bg-orange"></div>
				</div>

				<!--我的报修-->
			 <div class="menu-box">
					<div class="txt-box bg-green">
						<p><img src="../img/icon01.png" width="34" height="34"></p>我的报修
					</div>
			  <div class="line bg-green"></div>
				</div>
			</div>
		</div>
		<div class="back1">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginOne: true,
				loginOutOne: false,
				manager: {},
				welcome: false
			}
		},
		methods: {
			port() {
				this.$http.get("/user/port").then(resp => {
					console.log(resp.data.data)
				})
			},
			myrepairOne() {
				this.$router.push("/myrepair");
			},
			personalCenter() {
				this.$router.push("/personalCenter");
			},
			login() {
				this.$router.push("/login");
			},
			loginout() {
				this.$http.post("/logout").then(resp => {
					location.reload();
				})
			},
			isLogin() {
				let json = localStorage.getItem("adminRoot");
				console.log(json);
				if (json == null || json == undefined || json == "") {
					this.loginOutOne = false;
					this.loginOne = true;
					this.welcome = false;
				} else {
					this.welcome = true;
					this.loginOne = false;
					this.loginOutOne = true;
				}
			}
		},
		created() {
			let Json = localStorage.getItem("adminRoot");
			this.manager = JSON.parse(Json);
			this.isLogin();
			this.port();
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.menu-box img {
		margin-left: 20px;
		margin-top: 20px;
	}

	.in-sidenav {
		float: left;
		width: 90px;
		margin-left: 4%;
		margin-top: 8%;
		position: relative;
		top: -71px;
		left: -10px;
	}

	.in-sidenav>div {
		height: 103px;
	}

	.in-sidenav .bg-blue {
		background: #0185d1;
		height: 100%;
		color: white;
	}

	.in-sidenav .bg-orange {
		background: #ff9000;
		height: 100%;
		color: white;
	}

	.in-sidenav .bg-green {
		background: #00a83b;
		height: 50%;
		color: white;
	}

	a {
		text-decoration: none;
	}

	.myrepair {
		position: relative;
		top: 330px;
		left: -532px;
		display: inline-block;
		width: 138px;
		height: 38px;
	}

	.l0 {
		width: 66px;
		float: left;
		margin-right: 1px;
		border-radius: 5px;
		color: white;
	}

	.toptwo {
		position: relative;
		top: -14px;
		left: 2px;
		margin-top: -130px;
		margin-left: 31%;
		height: 104px;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 2px;
		text-align: center;
	}

	.in-img {
		width: 1920px;
		height: 900px;
		background-image: url(../img/index.png);
		background-size: 80% 70%;
		background-repeat: no-repeat;
	}

	.back1 {
		position: relative;
		top: -275px;
		width: 2000px;
		height: 100Px;
		/* background-color: red; */
		background-color: rgba(239, 239, 240, 1);
	}

	.top {
		width: 100%;
		height: 127px;
	}

	.login {
		float: right;
		margin-top: 10px;
		margin-right: 390px;
	}

	.login a {
		position: relative;
		top: -31px;
		z-index: 2;
		width: 32px;
		height: 20.8px;
		margin-right: 25px;
	}

	.c1 {
		width: 128px;
		height: 35px;
		z-index: 1;
		position: relative;
		left: 1377px;
		top: 3px;
		background-color: rgba(239, 239, 240, 1);
	}
</style>
